<div class="layui-layout layui-layout-admin">
	<div class="layui-header" id="app-header">
		<script type="text/html" template lay-done="layui.element.render('nav','nepadmin-header')">
			<ul class="layui-nav layui-layout-left" lay-filter="nepadmin-header">
          <li class="layui-nav-item" lay-unselect>
              <a nepadmin-event="flexible" title="侧边伸缩">
                  <i class="layui-icon layui-icon-shrink-right"></i>
              </a>
          </li>
<!--           
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
              <a nepadmin-event="prev" title="返回上一页">
                  <i class="layui-icon layui-icon-prev"></i>
              </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
              <a nepadmin-event="refresh" title="刷新">
                  <i class="layui-icon layui-icon-refresh-3"></i>
              </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
              <a href="https://www.layui.com/" target="_blank" title="Layui">
                  <i class="layui-icon layui-icon-website"></i>
              </a>
          </li> -->
         
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
              <input type="text" placeholder="Search / 搜索客户 ..." name="name" autocomplete="off" class="layui-input layui-search-input leftNavSearch">
          </li>
      </ul>
      <ul class="layui-nav layui-layout-right" lay-filter="nepadmin-header">

          <li class="layui-nav-item layui-hide-xs" lay-unselect>
              <a nepadmin-event="fullscreen" title="切换全屏">
                  <i class="layui-icon layui-icon-screen-full"></i>
              </a>
          </li>
          <!-- <li class="layui-nav-item layui-hide-xs" lay-unselect>
              <a title="APP 下载" lay-popup="{url:'popup/phone','offset':'rt',area:['400px','100%'],anim:5}">
                  <i class="layui-icon layui-icon-cellphone"></i>
              </a>
          </li> -->
          <li class="layui-nav-item" lay-unselect>
              <a class="showNewMsg" nepadmin-event="message" title="消息提醒">
                  <i class="layui-icon layui-icon-notice"></i>
                  <span class="layui-badge-dot message-dot"></span>
              </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
              <a class="layui-hide-xs">
                  欢迎回来，{{ layui.admin.data()['user'].username  }}
                  <i class="layui-icon layui-icon-triangle-d"></i>
              </a>
              <a class="layui-hide-sm layui-show-xs-inline-block">
                  <i class="layui-icon layui-icon-username"></i>
              </a>
              <dl class="layui-nav-child">
                  <dd><a lay-href="/userManage/index">用户管理</a></dd>
                  <dd><a lay-href="/client/index">客户管理</a></dd>
                  <hr/>
                  <dd><a href="javascript:void(0);" nepadmin-event="logout">退出登录</a></dd>
              </dl>
          </li>
      </ul>
    </script>
	</div>

	<div class="nepadmin-tabs-hidden">
		<script type="text/html" id="TPL-app-tabsmenu" template>
			{{# if(layui.conf.viewTabs == true){ }}
      <div class="nepadmin-tabs-wrap">
          <span class="nepadmin-tabs-btn nepadmin-tabs-action nepadmin-tabs-prev" data-type="prev">
              <i class="layui-icon layui-icon-left"></i>
          </span>
          <span class="nepadmin-tabs-btn nepadmin-tabs-action nepadmin-tabs-next" data-type="next">
              <i class="layui-icon layui-icon-right"></i>
          </span>
          <span class="nepadmin-tabs-btn nepadmin-tabs-action nepadmin-tabs-down" data-type="down">
              <i class="layui-icon layui-icon-close"></i>
          </span>
          <ul class="nepadmin-tabs-menu">
              {{# layui.each(layui.view.tab.data,function(i,item){ }}<li data-type="page" class="nepadmin-tabs-btn" lay-url="{{item.fileurl}}"><i class="nepadmin-tabs-ball"></i>{{ item.title }}<b class="layui-icon layui-icon-close nepadmin-tabs-close"></b></li>{{# }) }}
          </ul>
      </div>
      {{# } }}
    </script>
	</div>

	<!-- 侧边菜单 -->
	<div class="layui-side" id="app-sidebar">
		<div class="layui-side-scroll">
			<div class="layui-logo"><span>后台管理系统</span></div>
			<script type="text/html" template>
				<ul class="layui-nav layui-nav-tree" lay-filter="nepadmin-sidebar" is-template="true">  
					<li class="layui-nav-item"> 
						<a lay-href="" target="" title="客户信息"><i class="layui-icon layui-icon-apartment"></i>客户信息 <span class="layui-nav-more"></span></a> 
						<dl class="layui-nav-child">
							<dd>
								<a style="padding-left:50px" target="" lay-href="">核心客户<span class="layui-nav-more"></span></a>
								<dl class="layui-nav-child navCoreCustomers">
									
								</dl>
							</dd>
							<dd>
								<a style="padding-left:50px" target="" lay-href="">普通客户<span class="layui-nav-more"></span></a>
								<dl class="layui-nav-child navOrdinaryCustomers">
									
								</dl>
							</dd>
						</dl> 
					</li>  
					<span class="layui-nav-bar" style="top: 32px; height: 0px; opacity: 0;"></span>
				</ul>
			</script>
		</div>
	</div>

	<!-- 主体内容 -->
	<div class="layui-body" id="app-body"></div>
</div>

<script>
	var leftNavPage = 1;
	getNavHtml();
	function getNavHtml(name){
		$.ajax({
		    url: apiUrl + '/index.php/agricultural/Index/leftmenu?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
		    data:{
				page: leftNavPage,
				limit: 10,
				name:name
			},
			type: 'POST',
		    success:function(res){
				console.log(res)
				if(res.code == 0){
					var navCoreCustomersHtml = '';  //核心客户
					var navOrdinaryCustomersHtml = '';   //普通客户
					$.each(res.data.data_kernel,function(k,value){
						navCoreCustomersHtml += '<dd><a class="navInfoClick" style="padding-left:70px" target="" lay-href="/user/index" data-id= "' + value.id + '">' + value.name + '</a></dd>'
					})
					$('.navCoreCustomers').html(navCoreCustomersHtml)
					$.each(res.data.data_common,function(k,value){
						navOrdinaryCustomersHtml += '<dd><a class="navInfoClick" style="padding-left:70px" target="" lay-href="/user/index" data-id= "' + value.id + '">' + value.name + '</a></dd>'
					})
					$('.navOrdinaryCustomers').html(navOrdinaryCustomersHtml)
				}else if(res.code == 2){
					tokenExpired()
				}else{
					layer.msg(res.msg)
				}
		        
		    },
		    complete:function(){
		        //loading.hide();
		    }
		});
	}
	getNewMsg()
	// 定时请求消息列表
	// setInterval(function(){
	// 	getNewMsg()
	// },5000)
	
	$(document).on('click','.navInfoClick',function(){
		$('.navInfoItem').removeClass('navInfoItem');
		$(this).addClass('navInfoItem')
	})
	
	// 请求消息
	function getNewMsg(){
		$.ajax({
		    url: apiUrl + '/index.php/agricultural/index/remind?token=' + JSON.parse(window.sessionStorage.getItem('agricultural')).token,
			type: 'POST',
		    success:function(res){
				console.log(res)
				if(res.code == 0){
					if(res.data.length > 0){
						$('.showNewMsg span').show()
						var newMsgHtml = '';
						$.each(res.data,function(k,v){
							newMsgHtml += '<div class="nepadmin-cell newMsgClick" data-id="' + v.guideid + '"><div class="nepadmin-cell-title">' + v.name + '</div><span class="nepadmin-c-gray">' + v.sapling_desc + '</span><div class="nepadmin-cell-extra">' + v.guide_time + '</div></div>'
						})
						$('#indexNewInfo .layui-card').html(newMsgHtml)
					}else{
						$('.showNewMsg span').hide()
					}
				}else if(res.code == 2){
					tokenExpired()
				}else{
					layer.msg(res.msg)
				}
		        
		    },
		    complete:function(){
		        //loading.hide();
		    }
		});
	}
	
	function isMobile() { // true为PC端，false为手机端
		var userAgentInfo = navigator.userAgent;
	
		var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];
	
		var mobile_flag = false;
	
		//根据userAgent判断是否是手机
		for (var v = 0; v < mobileAgents.length; v++) {
			if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
				mobile_flag = true;
				break;
			}
		}
	
		 var screen_width = window.screen.width;
		 var screen_height = window.screen.height;    
	
		 //根据屏幕分辨率判断是否是手机
		 if(screen_width < 500 && screen_height < 800){
			 mobile_flag = true;
		 }
	
		 return mobile_flag;
	}
	
	
	// 侧边栏搜索回车时间
	$(document).on('keydown','.leftNavSearch',function(e) {
		if (e.keyCode == 13) {
			getNavHtml($(this).val());
		}
	});
	
	// 点击新消息跳转至详情页
	$(document).on('click','.newMsgClick',function(e) {
		window.localStorage.setItem('addCustomersInfo','{"id":"' + $(this)[0].dataset.id + '"}')
		layui.use('admin',function(admin) {
			admin.navigate('/user/details');
		})
	});
	
	
	$(document).on('click', '.showNewMsg', function() {
		var width = isMobile() ? '90%' : '600px'
		layer.open({
			type: 1,
			title: '新增田间服务信息',
			area: width,
			content: $('#indexNewInfo') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		});
		return false;
	})
</script>

<style type="text/css">
	#indexNewInfo .nepadmin-cell{
		display: flex;
		align-items: center;
	}
	#indexNewInfo .nepadmin-cell-title{
		padding-right: 10px;
	}
	#indexNewInfo .nepadmin-c-gray{
		max-width: 58%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	#app-sidebar .layui-nav .layui-nav-item a.navInfoItem{
		background: #5a8bff;
	}
	
	@media screen and (max-width: 768px) {
		#indexNewInfo .nepadmin-c-gray{
			display: none;
		}
	}
</style>